一、終於合體了

前幾天都在研究 Three.js，從建立 3D 世界、加入物件，到讓使用者可以用滑鼠控制視角，但還記得前面學過的 GSAP 嗎？GSAP 可以控制網頁動畫，而 Three.js 可以建立 3D 世界，那我們大膽一點把它們結合在一起，然後做出一個好玩又有趣的網頁吧。

二、GSAP控制3D物件

Three.js 的物件本身就有很多可以改變的屬性，例如：

cube.position.x
cube.position.y
cube.rotation.x
cube.rotation.y
cube.scale.x

既然這些都是數值，就可以交給 GSAP 幫我們改變。

gsap.to(cube.rotation, {
    y: Math.PI * 2,
    duration: 2
});

GSAP 控制的是Three.js 裡面的 cube.rotation，Math.PI * 2 就代表旋轉一整圈。

三、讓它移動吧

再加入一個移動動畫，你會覺得這個寫法很眼熟

gsap.to(cube.position, {
    x: 2,
    duration: 2,
    ease: "power2.inOut"
});

是因為之前在寫 GSAP 的時候就有使用過差不多的東西，就只差在以前控制的是 HTML 元素，現在控制的是 3D 物件。

gsap.to(".box", {
    x: 300,
    duration: 2
});

結合了GSAP就可以讓3D物件具備自己移動的能力。

四、結論

從 JavaScript、GSAP，一路走到 Three.js，原本分開學的東西終於在這裡接起來了，接下來，我們要將至今所學到的東西及技術都結合在一起，然後做出一個屬於鐵人賽的作品。

下一篇，來製作一個成品吧。